<template>
	<view class="updatepassword">
		<view v-if="falg" class="">
			<view class="title">
				修改登录密码
			</view>
			<view class="message">
				请输入{{pageData.username}}收到短信的验证码进行验证
			</view>
			<view class="inputbox">
				<input type="number" class="input" v-model="code"  placeholder="请输入验证码"/>
				<view v-if="codeFlag" class="yzm" @click="handleSendcode">
					获取验证码
				</view>
				<view v-else class="yamnum">
					{{time}}s
				</view>
			</view>
			
			<view class="btn" @click="handleNext">
				下一步
			</view>
		</view>
		<view v-else class="">
			<view class="title">
				设置登录新密码
			</view>
			<view class="lable">
				输入新密码
			</view>
			<input class="inputbox" type="password" v-model="password" placeholder="请输入新密码" style="margin-top: 10rpx;"/>
			<view class="lable">
				再次输入新密码
			</view>
			<input class="inputbox" type="password" v-model="password1" placeholder="请再次输入新密码" style="margin-top: 10rpx;"/>
			
			<view class="btn" @click="handleSave">
			  完成
			</view>
		</view>
		
	</view>
</template>

<script>
	import {
		sendsms,
		userinfo,
		resetpassword
	} from "@/api/api.js"
	export default {
		data(){
			return{
				falg:true,
				pageData:{},
				codeFlag:true,
				time: 60,
				setInterval: null,
				phone:"",
				code:"",
				password:"",
				password1:"",
			}
		},
		onLoad() {
			if (!uni.getStorageSync("token")) {
				uni.reLaunch({
					url: "../login/index"
				})
				return
			}
			this.handleGetuserinfo()
		},
			
		methods:{
			async handleGetuserinfo() {
				let res = await userinfo()
				this.pageData = res.data
				this.phone = this.pageData.username 
				this.pageData.username = this.pageData.username.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
				console.log("用户信息", this.pageData.username)
			},
			async handleSendcode() {
				const that = this
				
				let res = await sendsms({
					username: this.phone
				})
				console.log("验证码", res)
				if (res.code == 1000) {
					uni.showToast({
						title:res.message,
						icon: "none",
						duration: 1500
					});
					// uni.showToast({
					// 	title: '验证码' + res.data,
					// 	icon: "none",
					// 	duration: 5000
					// });
					that.codeFlag = false
					const interval = setInterval(function() {
						if ((that.time--) <= 0) {
							that.time = 60
							that.codeFlag = true
							clearInterval(interval)
						}
					}, 1000)
				} else {
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 2000
					});
				}
			
			},
			handleNext(){
				this.falg = false
			},
			async handleSave(){
				if(this.password == ""){
					uni.showToast({
						title: '请输入新密码！',
						icon: "none",
						duration: 1500
					});
					return
				}
				if(this.password1 == ""){
					uni.showToast({
						title: '请输入确认密码！',
						icon: "none",
						duration: 1500
					});
					return
				}
				let data = {
					username:this.phone,
					code:this.code,
					password:this.password,
					password1:this.password1,
					
				}
				let res = await resetpassword(data)
				if(res.code == 1000){
					uni.showToast({
						title: '密码修改成功,请重新登录！',
						icon: "none",
						duration: 1500
					});
					setTimeout(()=>{
						uni.removeStorageSync("token")
						uni.reLaunch({
							url:"/pages/login/index"
						})
					},2000)
					
				}else{
					uni.showToast({
						title: res.message,
						icon: "none",
						duration: 1500
					});
				}
				
			},
		}
	}
</script>

<style scoped lang="scss">
	.title{
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 400;
		color: #359691;
		line-height: 48rpx;
		width: 100%;
		text-align: center;
		margin-top: 124rpx;
	}
	.message{
		font-size: 28rpx;
		font-family: PingFang SC-Medium, PingFang SC;
		font-weight: 400;
		color: #707070;
		line-height: 48rpx;
		width: 100%;
		text-align: center;
		margin-top: 18rpx;
	}
	.inputbox{
		width: 690rpx;
		height: 108rpx;
		background: #FFFFFF;
		border-radius: 6rpx 6rpx 6rpx 6rpx;
		margin: 0 auto;
		margin-top: 106rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		box-sizing: border-box;
		.input{
			
		}
		.yzm{
			width: 158rpx;
			height: 56rpx;
			background: #E4E4E4;
			border-radius: 146rpx 146rpx 146rpx 146rpx;
			font-size: 24rpx;
			font-family: PingFang SC-Medium, PingFang SC;
			font-weight: 400;
			color: #333333;
			line-height: 56rpx;
			text-align: center;
		}
	}
	.btn{
		width: 542rpx;
		height: 80rpx;
		background: #04767C;
		border-radius: 512rpx 512rpx 512rpx 512rpx;
		font-size: 36rpx;
		font-family: PingFang SC-Bold, PingFang SC;
		font-weight: 400;
		color: #FFFFFF;
		line-height: 80rpx;
		text-align: center;
		margin: 0 auto;
		margin-top: 122rpx;
	}
	.lable{
		margin-left: 30rpx;
		margin-top: 20rpx;
	}
</style>